<script setup lang="ts">
import {computed, defineComponent} from "vue";
import {activeGlobalItem, tempActiveItem} from "@/components/formDesigner/select.ts";
import draggable from "vuedraggable";
import DesignItem from "@/components/formDesigner/DesignItem.vue";
import {ElMessage} from "element-plus";

defineComponent({
  name: 'custom-el-card'
})
const emit = defineEmits(['update:activeItem'])
const props = defineProps({
  field: Object,
})

const options = computed(() => {
  return props.field?.options
})

const handleClick = () => {
  activeGlobalItem.value = props.field
}

const onAdd = (evt: any, list: any) => {
  console.log("新加", evt)
  // 判断是否拖拽到当前组件中
  if (evt.to.className.includes('row-drag')) {
    // 判断 tempActiveItem 是否有值 并且不是 row
    if (tempActiveItem.value) {
      list.push(tempActiveItem.value)
    }
  }
}

</script>

<template>
  <div class="row-box" :class="{'row-box-border': activeGlobalItem?.id == field?.id}" @click.stop="handleClick">
    <el-card>
      <template v-if="options.title" #header>
        {{options.title}}
      </template>
      <draggable
          v-model:list="options.list"
          :animation="400"
          class="drag-wrapper row-drag"
          group="componentsGroup"
          draggable=".drawing-item"
          @add="onAdd($event, options.list)"
      >
        <template #item="{element}">
          <DesignItem
              :model="element"
              :element="element"
          />
        </template>
      </draggable>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.row-box {
  height: 100%;
}

.row-box-border {
  min-height: 42px;
  border: 1px solid #409eff;
}

.drag-wrapper {
  width: 100%;
  min-height: 42px;
}
</style>
